<template>
  <div class="train-data">
    <div class="train-items">
        <div class="train-item" :class="{mianRed: item.remarks == 'red', mianBlue: item.remarks == 'blue', mianOrange: item.remarks == 'orange'}" v-for="(item, key) in dataList" :key=key :style="{marginRight: mRight + 'px'}">
            <div class="train-item-number">{{item.number}} + </div>
            <div class="train-item-text">{{item.name}}</div>
        </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'trainData',
  data () {
      return{
        
      }
    
  },
  props: {
    mRight: Number,
    dataList:{
        type: Array,
        required: true
    }
  },
  components: {
   
  }
}
</script>

<style lang="stylus" scoped>
.train-data{
    background:rgba(255,255,255,1);
    box-shadow:0px 1px 2px 0px rgba(0,0,0,0.1);
    margin-bottom: 20px; 
}

.train-items{
    padding: 40px 30px 20px 30px;
    font-size: 0;    
}
.train-item{
   width:170px;
    height:128px;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: top;
    text-align: center;
    margin-bottom: 40px;
}
.train-item:nth-child(4n){
   margin-right: 0 !important;
}
.train-item-number{
    font-size:34px;
    font-family:MicrosoftYaHei-Bold;
    font-weight:bold;
    
    margin-top: 30px;
    margin-bottom: 20px;
}
.train-item-text{
    font-size:14px;
    font-family:MicrosoftYaHei;
  
}
.mianRed{
    background:rgba(255,243,246,1);
    color:rgba(255,39,88,1);
}
.mianBlue{
    background:rgba(242,245,255,1);
    color:rgba(20,87,253,1);
}
.mianOrange{
    background:rgba(255,243,242,1);
    color:rgba(255,98,82,1);
}
</style>
